接下來就是跟大家說我遇到了那些問題，與怎麽解決啦

在最後放上我的 github 的連結，可以自己 clone 下來玩看看(因爲自己也還沒做到太多的測試，包含 build 檔案，所以有什麼不足的再一起討論)

正文

• 安裝 webpack-cli
  因爲是 webpack 3 -> webpack 4 ，所以要先安裝 webpack-cli

npm install webpack-cli --asve-dev

而因爲 4 不支援 webpack.optimize.CommonsChunkPlugin ，所以要修改 webpack.config.js

• 修改 webpack.config.js

module.exports = {
  ...
  optimization: {
    runtimeChunk: {
      name: 'manifest'
    },
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendor",
          chunks: "all"
        }
      }
    }
  },
  plugins: [
  ...
        // new webpack.optimize.CommonsChunkPlugin({
        //     name: 'vendor'
        // }),
        // new webpack.optimize.CommonsChunkPlugin({
        //     name: 'manifest'
        // }),
        // new webpack.optimize.UglifyJsPlugin({
        //     comments: false,
        //     sourceMap: true
        // }),
  ...
    ]
}

• webpack.config.js 加入 mode: "development" (不然會一直有警告)

module.exports = {
    mode: "development",
    ...
}

再來遇到 Cannot find module ‘babel-core’ ，因爲 babel 下載方式不一樣，所以要下載這個版本(這邊我也不確定舊到可不可以拿掉)

npm install --save-dev @babel/core @babel/preset-env

• 修改檔案名稱(這個真的是解的莫名其妙)
  :::info
  .babelrc（原本的換檔名）
  .babel.rc
  :::

• 加入.gitignore

//.gitignore
# System and IDE files
Thumbs.db
.DS_Store
.idea
*.suo
*.sublime-project
*.sublime-workspace

# Vendors
node_modules/

# Build
build/
/npm-debug.log

• 最後在 shell 一樣執行 npm run dev

如果到這邊有成功的話在 0.0.0.0:port 會有一個黑色的畫面，就代表成功建立啦

在最後附上我的 github
webpack+phaser